<template>
  <div>
    <el-input v-model="searchName" placeholder="请输入部门名称" />
    <el-tree
      ref="treeRef"
      node-key="id"
      :data="departmentTree"
      :props="defaultProps"
      :filter-node-method="filterNode"
      @node-click="getUsers"
      :expand-on-click-node="false"
      highlight-current
      default-expand-all/>
  </div>

</template>

<script lang="ts" setup>
import {
  getCurrentInstance, ref, onMounted, watch, defineExpose,
} from 'vue'; // 使用proxy代替ctx，因为ctx只在开发环境有效
import type { ElTree } from 'element-plus';

const { proxy } = getCurrentInstance();
// 加载部门属性菜单
interface Tree { // 树形接口类型
  id:string;
  name: string;
  children?: Tree[];
}
// 定义查询文本
const searchName = ref('');
// 定义属性菜单的ref对象
const treeRef = ref<InstanceType<typeof ElTree>>();
// 下述方法每个节点都会过滤一次
const filterNode = (value: string, data: Tree) => { // value是传递过来的查询的值，data是某节点的数据（包含children）
  if (!value) { // 如果value不存在，即搜索框为空则显示所有节点
    return true;
  }
  // 否则根据查询的值决定显示的节点
  return data.name.includes(value);
};
// 检查部门搜索文本的值，如果发生变化则对节点中的值进行过滤
watch(searchName, (val) => {
  treeRef.value!.filter(val); // 执行tree节点过滤的方法，每个节点都会过滤一次
});

const defaultProps = { // 部门树形菜单显示标签对应的属性名
  children: 'children',
  label: 'name',
};
const departmentTree = ref<Tree[]>([]);// 定义部门树形菜单
const getDepartmentTree = async () => { // 读取部门树形菜单
  const resData:any = await new proxy.$Request(proxy.$urls.API_URL_BACKSTAGE_DEPARTMENT_TREE).get();
  if (resData.success) {
    departmentTree.value = resData.data;
  }
};
onMounted(getDepartmentTree);

// 当点击部门节点时，显示该部门下的账户列表
const getUsers = (data: Tree) => { // 获取点击数节点的信息，包含该节点的children
  // 调用父组件的方法，根据部门id刷新用户表格列表
  proxy.$emit('reloadUsersByDepartmentId', data.id);
};
// 供外部插件调用，用于设置tree的默认选中组件
const setCurrentDepartmentInTree = (departmentId:string) => {
  if (departmentId === '') {
    treeRef.value!.setCurrentKey('');// 设置本组件中的tree默认选中的节点与外部值一致
  } else {
    treeRef.value!.setCurrentKey(departmentId);// 设置本组件中的tree默认选中的节点与外部值一致
  }
};
defineExpose({ // 参考vue3官方文档，需要将函数暴露出去才能被父组件调用，setup模式是不暴露的
  setCurrentDepartmentInTree,
});
</script>

<style scoped>

</style>
